<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_txt">{{$t('balance.current_balance')}}</view>
			<view class="h_num">{{$t('use.money_code')}} {{userInfo.user_money}}</view>
		</view>
		<view class="main">
			<view class="card">
				<view class="c_tit">{{$t('balance.cash_title')}}</view>
				<view class="btn_item">
					<block v-for="(item,index) in priceArr">
						<view class="btn" :class="p_id == item.id ? 'btn_s':''" :data-money="item.price"
							:data-id="item.id" @click="selectPrice">
							{{$t('use.money_code')}}{{item.price}}
						</view>
					</block>
				</view>
				<view class="money_item">
					<view class="code">{{$t('use.money_code')}}</view>
					<input class="m_input" type="digit" v-model="money" :placeholder="$t('balance.cash_number_tip')" />
					<view class="iconfont del" @click="delInput">&#xeba0;</view>
				</view>
			</view>
			<view class="card select_item">
				<view class="select">
					<view class="s_tit">{{$t('cash.select_tit')}}</view>
					<view class="pay_item">
						<block v-for="(item,index) in chargeArr" :key="'p_'+index">
							<view class="row" @click="chargeChange" :data-id="item.id">
								<image class="logo" :src="item.logo" mode="widthFix"></image>
								<view class="text">{{item.txt}}</view>
								<view class="iconfont select" v-if="item.id == c_id">&#xe730;</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<!-- <view class="card bing" @click="$r('/pages/my/paypal')" v-if="c_id == 'paypal'">
				<view class="b_tit">{{$t('balance.cash_account')}}</view>
				<view class="b_txt">{{userInfo.paypal ||  $t('balance.cash_bank_tip')}}</view>
				<view class="iconfont go">&#xe70f;</view>
			</view>
			<view class="card bing" @click="$r('/pages/my/bingTRX')" v-if="c_id == 'trx'">
				<view class="b_tit">{{$t('cash.trx_address')}}</view>
				<view class="b_txt">{{userInfo.tron_addr ||  'Tron Addr'}}</view>
				<view class="iconfont go">&#xe70f;</view>
			</view> -->
			<view class="tip_item">
				{{$t('balance.cash_remark')}}<label class="fee">{{fee}} USDT</label>
			</view>
		</view>
		<view class="_footer">
			<view class="btn sub" @click="to_with">{{$t('balance.cash')}}</view>
		</view>
	</view>
</template>

<script>
	// import Web3 from 'web3';

	import helper from '@/common/helper';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				p_id: '',
				priceArr: [{
						price: 10,
						id: 1
					}, {
						price: 30,
						id: 2
					}, {
						price: 50,
						id: 3
					},
					{
						price: 100,
						id: 4
					}, {
						price: 150,
						id: 5
					}, {
						price: 200,
						id: 6
					}
				],
				c_id: 'trx',
				chargeArr: [
					// {
					// 	id: 'paypal',
					// 	logo: '/static/pay/paypal.png',
					// 	txt: 'Paypal'
					// },
					{
						id: 'trx',
						logo: '/static/pay/USDT.png',
						txt: 'USDT'
					}
				],
				money: '',
				fee: '0',
				chain_config: {
					usdt_address: '',
					approve_address: '',
					erc20abi: ''
				},
				is_approve: 0,
				userInfo: {}
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad() {
			this.getMyData();
			this.initData();
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.pageItem {
		padding-bottom: 22vw;
	}

	.head {
		width: 100%;
		background: $main_color_s2;
		color: #fff;
		padding: 6vw 0 15vw;
		text-align: center;

		.h_txt {
			font-size: 3.6vw;
		}

		.h_num {
			font-size: 6vw;
			padding: 2vw 0 0;
		}
	}

	.main {
		width: 100%;
		padding: 0 4%;
		position: relative;
		margin-top: -10vw;

		.card {
			@include card_style();

			.c_tit {
				width: 100%;
				font-size: 4vw;
				color: $main_color5;
				font-weight: bold;
				padding-bottom: 2vw
			}

			.btn_item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.btn:not(:nth-child(3n+1)) {
					margin-left: 2%;
				}

				.btn {
					width: 32%;
					margin-top: 2vw;
					text-align: center;
					background: #F8F6F7;
					border-radius: 2vw;
					font-size: 3.8vw;
					font-weight: bold;
					padding: 3vw 0;
				}

				.btn_s {
					background: $main_color_s2;
				}
			}

			.money_item {
				width: 100%;
				margin-top: 3vw;
				padding: 1vw 0;
				border-bottom: 1rpx solid #f0efef;
				display: flex;
				align-items: center;

				.code {
					font-size: 4vw;
					color: $main_color4;
					font-weight: bold;
				}

				.m_input {
					flex: 1;
					padding: 0 4vw;
					font-size: 4.5vw;
					color: $main_color5;
					height: 10vw;
					line-height: 10vw;
				}

				.del {
					color: #b6b6b6;
					font-size: 5vw;
				}
			}
		}

		.select_item {
			margin-top: 4vw;

			.select {
				width: 100%;

				.s_tit {
					font-size: 3.8vw;
					color: $main_color5;
					font-weight: bold;
					padding-bottom: 1vw;
				}

				.pay_item {
					width: 100%;

					.row {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 6vw;

						.logo {
							width: 6vw;
						}

						.text {
							flex: 1;
							font-size: 4vw;
							font-weight: bold;
							color: $main_color5;
							padding: 0 3vw;
						}

						.select {
							width: 4.3vw;
							color: $main_color;
						}
					}
				}
			}
		}

		.bing {
			margin-top: 4vw;
			display: flex;
			align-items: center;
			font-size: 3.8vw;
			color: $main_color5;
			font-weight: bold;

			.b_tit {
				flex: 1;
			}

			.go {
				font-size: 3.6vw;
				color: $main_color4;
				font-weight: 400;
				margin-left: 2vw;
			}
		}

		.tip_item {
			width: 100%;
			margin-top: 3vw;
			font-size: 3.2vw;
			color: $main_color4;

			.fee {
				color: $price_color;
				padding: 0 1vw;
			}
		}
	}

	._footer {
		@include page_button();
		position: fixed;
		bottom: 0;
		height: 22vw;
		padding: 3vw 0 6vw;
		background: $main_bg_color;
	}
</style>